<!DOCTYPE html>
<html>
<head>
    <title>商品管理</title>
    <#include "/include/base/header.ftl">
</head>
<style>
    .main-content{
        height: 100%;
        overflow-y: auto;
    }
    .goodsTypeContent{
        padding-bottom: 20px;
    }
</style>
<body>
<div class="ui-layout-west">
    <div class="main-content goodsTypeContent">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa fa-map-o"></i>分类信息
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="goodsTypeTree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>
<div class="ui-layout-center">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title"><i class="fa fa-user-o"></i>商品管理</div>
                <div class="box-tools pull-right">
                    <@shiro.hasPermission name="mall:goods:form">
                        <a href="javascript:void(0);" onclick="tableDialog(this)" class="btn btn-default" data-type="form" data-title="新增商品" data-width="850" data-height="700" data-offset="30" data-href="${ctx}/mall/goods/form"><i class="fa fa-plus"></i> 新增</a>
                    </@shiro.hasPermission>
                </div>
            </div>
            <div class="box-body">
                <form id="searchForm" action="${ctx}/mall/goods/dataList" class="form-inline" onsubmit="return search();">
                    <div class="form-group">
                        <label class="control-label">商品名称：</label>
                        <div class="control-inline">
                            <input type="text" name="goodsName" value="" maxlength="100" class="form-control width-120" autocomplete="off" />
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-sm">查询</button>
                        <button type="reset" class="btn btn-default btn-sm">重置</button>
                    </div>
                </form>
                <table id="datatable" class="table table-hover table-striped table-bordered"></table>
            </div>
        </div>
    </div>
</div>
</body>
<#include "/include/base/footer.ftl">
<#include "/include/pagelist.ftl">
<script>
    $('body').layout({
        west__initClosed: false, // 是否默认关闭
        west__size: 180,
        spacing_open:8,
    });
</script>
<script>
    $(function () {
        //渲染ztree树
        $.ajax({
            url: "${ctx}/mall/goods/ztreeSelectData",
            type: "GET",
            success: function(result){
                if(result.code == "SUCCESS"){
                    $.fn.zTree.init($("#goodsTypeTree"), {
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        callback: {
                            onClick: function (event, treeId, treeNode) {
                                $("input[name='deptId']").val(treeNode.id);
                                search();
                            }
                        },
                    }, result.data);
                }
            }
        })


        $("#datatable").datatable([
            { field: "id", title: "编号", align: "center", width: "80" },
            {
                field: "name", title: "名称",
                formatter: function (value, row, index) {
                    return '<span class="primary">'+value+'</span>';
                }
            },{
                field: "pic", title: "图片", align: "center", width: "100",
                formatter: function (value, row, index) {
                    return '<img style="width:30px;height:30px;" src="'+value+'">'
                }
            },{
                field: "price", title: "价格", align: "center", width: "100",
                formatter: function (value, row, index) {
                    return fenToYuan(value);
                }
            },
            { field: "stock", title: "库存", align: "center", width: "100" },
            { field: "saleCount", title: "销量", align: "center", width: "100" },
            {
                field: "status", title: "状态", align: "center", width: "80",
                formatter: function (value, row, index) {
                    return value == '0' ? "正常" : "下架";
                }
            },
            {
                title: "操作", align: "center", width: "90",
                formatter: function (value, row, index) {
                    var str = "";
                    <@shiro.hasPermission name="mall:goods:form">
                        str += '<a class="list-btn" href="javascript:void(0);" onclick="tableDialog(this)" data-type="form" data-title="编辑商品" data-width="850" data-height="700" data-offset="30" data-href="${ctx}/mall/goods/form?id='+row.id+'"><i class="fa fa-pencil"></i></a>';
                    </@shiro.hasPermission>
                    if(str == ""){ str = "-"; }
                    return str;
                }
            },
        ])
    })
</script>
</html>